import React, { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { MainFooterWrapper } from './style'

interface IProps {
  children?: ReactNode
}
const MainFooter: FC<IProps> = () => {
  const [iconText] = useState([
    '音乐开放平台',
    '云村交易所',
    'X StudioAI歌手',
    '用户认证',
    'AI 免费写歌',
    '云推歌',
    '赞赏'
  ])

  return (
    <MainFooterWrapper>
      <div className="content">
        {/* 顶部图标 */}
        <div className="top">
          <ul className="top_ul">
            {[1, 2, 3, 4, 5, 6, 7].map((m) => {
              return (
                <li className="top_li" key={m}>
                  <a className={`top_a footer_enter a_${m}`}></a>
                  <span className="top_span">{iconText[m - 1]}</span>
                </li>
              )
            })}
          </ul>
        </div>

        {/* 文字部分 */}
        <div className='footer'>
          <p>服务条款| 隐私政策| 儿童隐私政策| 版权投诉| 投资者关系| 广告合作 | 联系我们</p>
          <p>廉正举报 不良信息举报邮箱: 51jubao@service.netease.com 客服热线:95163298</p>
          <p>互联网宗教信息服务许可证:浙(2022)0000120 增值电信业务经营许可证:浙B2-20150198 粤B2-20090191-18  工业和信息化部备案管理系统网站</p>
          <p>网易公司版权所有©1997-2024杭州乐读科技有限公司运营：浙网文[2024] 0900-042号  浙公网安备 33010802013307号 算法服务公示信息</p>
        </div>

      </div>
    </MainFooterWrapper>
  )
}

export default memo(MainFooter)
